<template>
  <view class="index" id="index">
    <!-- <view style="z-index: 1">
      <u-swiper
        :list="SwiperList"
        :border-radius="0"
        mode="none"
        @click="clickSwiper"
        :height="519"
      ></u-swiper>
    </view>
    <view class="part">
      <view
        class="part-item boxShadow"
        v-for="(item, index) in partList"
        :key="index"
        @click="toRouter(item)"
      >
        <image :src="item.image" class="item-image" />
        <view class="info">
          <view>{{ item.title }}</view>
          <view>{{ item.dis }}</view>
        </view>
      </view>
    </view> -->

    <!-- MUMI MALL -->
    <Header />

    <view style="background-color: #ffffff; padding: 0 20rpx">
      <view class="use">
        <view>
          <view>喵咪宜购|使用手册</view>
          <view class="look">
            <view>MUMIBUY.CN</view>
            <view>点击查看</view>
          </view>
        </view>
      </view>

      <view class="catalog">
        <view
          class="catalog-item"
          v-for="(item, index) in catalogList"
          :key="index"
          :style="{ backgroundImage: 'url(' + item.bgkimg + ')' }"
          @click="toRouter(item)"
        >
          <view>
            <view>
              <view class="catalog-name">{{ item.name }}</view>
              <view class="catalog-dis" :style="{ color: item.disTextColr }">{{
                item.dis
              }}</view>
            </view>
            <!-- <u-image
              :width="item.width"
              :height="item.height"
              :src="item.icon"
            ></u-image> -->
          </view>
        </view>
      </view>

      <!-- <view class="catalog">
        <view
          class="catalog-item"
          v-for="(item, index) in newList"
          :key="index"
          :style="{ backgroundColor: item.backColor }"
          @click="toRouter(item)"
        >
          <image style="width: 100%; height: 100%" :src="item.image" />
        </view>
      </view> -->

      <!-- <view class="new-goods">
        <view>每日上新</view>
        <view>更多实惠 更多选择 更多便捷</view>
        <view class="goods" v-for="index in 2" :key="index">
          <u-image
            width="100%"
            height="300rpx"
            src="https://maomi-shop-resource-hz.oss-cn-hangzhou.aliyuncs.com/134a2de62bc93044c984215ce4141534.jpg"
          ></u-image>
          <view class="goods-info">
            <view>吸收饱满汤汁的泡醋凤爪，酸辣清香， 18小时浸泡，入味！</view>
            <view>
              <u-line-progress
                :percent="70"
                type="success"
                :height="14"
                :style="{ flex: 1 }"
              ></u-line-progress>
              <view class="manyi">满意度70%</view>
            </view>

            <view class="buy">
              <view>下单金额￥1.90</view>
              <view>
                <u-button type="error" shape="circle" size="mini"
                  >购买</u-button
                >
              </view>
            </view>
          </view>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
import Header from "./components/header";
export default {
  components: {
    Header,
  },
  data() {
    return {
      SwiperList: [
        {
          image:
            "https://maomi-shop-resource-hz.oss-cn-hangzhou.aliyuncs.com/03024759598f96cbaeb780ab522452cf.png",
          title: "昨夜星辰昨夜风，画楼西畔桂堂东",
          router: "https://segmentfault.com/a/1190000020620972",
        },
        {
          image:
            "https://maomi-shop-resource-hz.oss-cn-hangzhou.aliyuncs.com/03024759598f96cbaeb780ab522452cf.png",
          title: "身无彩凤双飞翼，心有灵犀一点通",
          router: "https://uniapp.dcloud.io/component/web-view",
        },
      ],
      partList: [
        {
          image: "https://qiniu.fleayun.cn/lingshi.png",
          title: "优质好物",
          dis: "物美价廉即时达",
          router: "/pages/changeShop/changeShop",
          switchTable: true,
        },
        {
          image: "https://qiniu.fleayun.cn/louzhang.png",
          title: "新用户注册",
          dis: "在您身边的优价商品平台",
          router: "/pages/center/center",
          switchTable: false,
        },
      ],
      catalogList: [
        {
          name: "校园零食铺",
          dis: "免费送货  低价便宜",
          disTextColr: "#810E33",
          bgkimg: "https://qiniu.fleayun.cn/index_3.png",
          switchTable: true,
          router: "/pages/changeShop/changeShop",
          sign: "buy",
        },
        {
          name: "超值好货",
          dis: "超便宜定价低至一折",
          disTextColr: "#13379D",
          bgkimg: "https://qiniu.fleayun.cn/index_4.png",
          switchTable: false,
          router: "/pages/builder/purchase",
          sign: "purchase",
        },
        {
          name: "新用户注册",
          dis: "加入我们即享福利",
          disTextColr: "#999933",
          bgkimg: "https://qiniu.fleayun.cn/index_1.png",
          switchTable: false,
          router: "/pages/center/center",
          sign: "application",
        },
        {
          name: "加入社群",
          dis: "共享最新最潮资讯",
          disTextColr: "#003333",
          bgkimg: "https://qiniu.fleayun.cn/index_2.png",
          switchTable: false,
          router: "/pages/join/join",
          sign: "join",
        },
      ],
      newList: [
        {
          image: require("@/static/index/index_1.png"),
        },
      ],
    };
  },
  methods: {
    /**
     * 跳转
     */
    toRouter(info) {
      // 购买零食
      if (info.sign === "buy") {
        uni.switchTab({
          url: info.router,
        });
        return;
      }
      // 进货
      if (info.sign === "purchase") {
        if (
          this.vuex_user.hasOwnProperty("status") &&
          this.vuex_user.status === 2
        ) {
          uni.navigateTo({
            url: "/pages/builder/purchase",
          });
        } else {
          this.$u.toast("请先申请楼长");
          uni.switchTab({
            url: "/pages/center/center",
          });
        }
        return;
      }
      // 假如社群
      if (info.sign === "join") {
        uni.navigateTo({
          url: info.router,
        });
        return;
      }
      // 申请楼长
      if (info.sign === "application") {
        this.jugeBuilderStatus(info);
        return;
      }

      // if (this.vuex_user.hasOwnProperty("token")) {
      //   // 楼长申请
      //   this.jugeBuilderStatus(info);
      //   //
      // } else {
      //   this.$u.toast("请先登录");
      //   setTimeout(() => {
      //     uni.switchTab({
      //       url: "/pages/center/center",
      //     });
      //   }, 500);
      // }
    },
    /**
     * 判断 楼长审核状态
     */
    jugeBuilderStatus(info) {
      if (this.vuex_user.hasOwnProperty("status")) {
        if (this.vuex_user.status === 2) {
          this.$u.toast("您已经是商户，无需再次申请.");
        } else if (this.vuex_user.status === 1) {
          this.$u.toast("商户审核中,请耐心等待.");
        } else {
          uni.navigateTo({
            url: info.router,
          });
        }
      } else {
        uni.navigateTo({
          url: info.router,
        });
      }
    },

    /**
     * 点击轮播图
     */
    clickSwiper(e) {
      // uni.navigateTo({
      //   url: "/pages/ads/ads?router=" + this.SwiperList[e].router,
      // });
    },
  },
  onLoad(option) {
    // uni.chooseAddress({
    //   success(res) {
    //     console.log(res.userName);
    //     console.log(res.postalCode);
    //     console.log(res.provinceName);
    //     console.log(res.cityName);
    //     console.log(res.countyName);
    //     console.log(res.detailInfo);
    //     console.log(res.nationalCode);
    //     console.log(res.telNumber);
    //   },
    // });
  },
};
</script>

<style scoped lang ='scss' >
$titleWidth: 370rpx;

.index {
  min-height: 100vh;
  .use {
    /* background-color: #0bf3f3; */
    background-image: url("https://qiniu.fleayun.cn/bgc.png");
    background-size: 100% 100%;
    height: 300rpx;
    /* padding: 20rpx 40rpx 20rpx 20rpx; */
    border-radius: 10rpx;
    /* box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); */
    & > view {
      position: relative;
      top: 130rpx;
      right: 40rpx;
      float: right;
      &:nth-child(1) {
        font-size: 40rpx;
        color: #101010;
      }
      .look {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        font-size: 24rpx;
        color: #171515;
        margin-top: 10rpx;
        & > view:last-child {
          background-color: #ccccff;
          color: #171515;
          border-radius: 20rpx;
          font-size: 20rpx;
          padding: 5rpx 10rpx;
        }
      }
    }
  }
  .new-goods {
    margin-top: 50rpx;
    padding-bottom: 40rpx;
    & > view:nth-child(1) {
      color: #101010;
      font-size: 56rpx;
    }
    & > view:nth-child(2) {
      color: #7f7979;
      font-size: 28rpx;
      margin-bottom: 20rpx;
    }
    .goods {
      margin-top: 40rpx;
      box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
      .image {
        width: 100%;
        height: 300rpx;
      }
      .goods-info {
        padding: 20rpx 40rpx;
        background-color: #e6e6e6;
        /* margin-top: -7rpx; */
        color: #101010;
        font-size: 35rpx;
        border-bottom-left-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        & > view:nth-child(1) {
          text-align: justify;
          font-size: 36rpx;
        }
        & > view:nth-child(2) {
          height: 50rpx;
          display: flex;
          justify-content: space-between;
          flex-direction: row;
          align-items: center;
          .manyi {
            width: 150rpx;
            text-align: end;
            font-size: 18rpx;
          }
        }
        .buy {
          display: flex;
          justify-content: space-between;
          flex-direction: row;
          align-items: center;
          & > view:nth-child(1) {
            font-size: 28rpx;
          }
        }
      }
    }
  }
  .seccond-title:after {
    content: "";
    width: 100%;
    display: inline-block;
  }
  .catalog {
    padding: 20rpx 0;
    /* margin-top: 20rpx; */
    display: grid;
    grid-template-columns: repeat(2, 49%);
    grid-row-gap: 20rpx;
    grid-column-gap: 10rpx;
    justify-content: space-between;
    .catalog-item {
      /* background-color: #ddf5f4; */
      height: 190rpx;
      padding: 20rpx;
      border-radius: 10rpx;
      background-size: 100% 100%;
      box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
      & > view {
        position: relative;
        top: 30rpx;
        float: left;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        .catalog-name {
          color: #101010;
          font-size: 35rpx;
        }
        .catalog-dis {
          font-size: 24rpx;
          color: #a90202;
        }
      }
    }
  }

  .part {
    padding: 0 20rpx;
    z-index: 100;
    position: relative;
    top: -90rpx;
    .part-item {
      height: 356rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 80rpx;
      margin-bottom: 40rpx;
      .item-image {
        width: 179rpx;
        height: 203rpx;
        margin-right: 20rpx;
      }
      .info {
        flex: 1;
        text-align: center;
        & > view:nth-child(1) {
          color: #333333;
          font-weight: bold;
          font-size: 44rpx;
          margin-bottom: 10rpx;
        }
        & > view:nth-child(2) {
          color: #666666;
          font-size: 30rpx;
        }
      }
    }
  }
}
</style>
